<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。">
  <meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物">
  <title>小兔鲜儿-新鲜、惠民、快捷！</title>
  <!-- 浏览器导航栏ico小图 -->
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <!-- 注意：按顺序引入，外链式样式表后写的生效 -->
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <!-- 快捷导航 -->
  <div class="shortcut">
    <div class="wrapper">
      <ul>
        <li><a href="#">请先登录</a></li>
        <li><a href="#">请先登录</a></li>
        <li><a href="#">请先登录</a></li>
        <li><a href="#">请先登录</a></li>
        <li><a href="#">请先登录</a></li>
        <li><a href="#">请先登录</a></li>
        <li><a href="#"><span></span>请先登录</a></li>
      </ul>
    </div>
  </div>

  <!-- 头部 -->
  <div class="header wrapper">
    <div class="logo">
      <h1><a href="#">小兔鲜儿</a></h1>
    </div>
    <div class="nav">
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
      </ul>
    </div>
    <div class="search">
      <input type="text" placeholder="搜一搜">
      <!-- 定位 放大镜 -->
      <span></span>
    </div>
    <div class="car">
      <span>2</span>
    </div>
  </div>

  <!-- banner -->
  <div class="banner">
    <div class="wrapper">
      <!-- 有多少个图就放多少个li -->
      <ul>
        <li><a href="#"><img src="./uploads/banner_1.png" alt=""></a></li>
      </ul>

      <!-- 侧导航 -->
      <div class="aside">
        <ul>
          <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
          <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
          <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
          <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
          <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
          <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
          <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
          <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
          <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
          <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
        </ul>
      </div>
      <!-- 箭头 -->
      <a href="#" class="prev"></a>
      <a href="#" class="next"></a>
      <!-- 原点:当前状态current -->
      <!-- js找到用户点击的li 添加类名 li变成白色的 -->
      <ol>
        <li></li>
        <li></li>
        <li class="current"></li>
        <li></li>
        <li></li>
      </ol>
    </div>
  </div>

  <!-- 新鲜好物 -->
  <div class="goods wrapper">
    <!-- hd:header -->
    <div class="hd">
      <h2>新鲜好物<span>新鲜出炉 品质靠谱</span></h2>
      <a href="#">查看全部</a>
    </div>
    <!-- bd:body -->
    <!-- clearfix清除浮动影响 -->
    <div class="bd clearfix">
      <ul>
        <li>
          <a href="#">
            <img src="./uploads/new_goods_1.jpg" alt="">
            <h3>睿米无线吸尘器F8</h3>
            <div>￥<span>899</span></div>
            <b>新品</b>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./uploads/new_goods_1.jpg" alt="">
            <h3>睿米无线吸尘器F8</h3>
            <div>￥<span>899</span></div>
            <b>新品</b>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./uploads/new_goods_1.jpg" alt="">
            <h3>睿米无线吸尘器F8</h3>
            <div>￥<span>899</span></div>
            <b>新品</b>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./uploads/new_goods_1.jpg" alt="">
            <h3>睿米无线吸尘器F8</h3>
            <div>￥<span>899</span></div>
            <b>新品</b>
          </a>
        </li>
      </ul>
    </div>
  </div>

  <!-- 生鲜 -->
  <div class="fresh wrapper">
    <div class="hd">
      <h2>生鲜</h2>
      <a href="#" class="more">查看全部</a>
      <ul>
        <li><a href="#">水果</a></li>
        <li><a href="#">水果</a></li>
        <li><a href="#">水果</a></li>
        <li><a href="#">水果</a></li>
        <li><a href="#">水果</a></li>
        <li><a href="#">水果</a></li>
        <li><a href="#">水果</a></li>
      </ul>
    </div>
    <div class="bd clearfix">
      <div class="left">
        <a href="#"><img src="./uploads/fresh_goods_cover.png" alt=""></a>
      </div>
      <div class="right"></div>
    </div>
  </div>

  <!-- 版权 -->
  <div class="footer">
    <div class="wrapper">
      <div class="top">
        <ul>
          <li>
            <!-- 通过伪元素添加标签实现精灵图 -->
            <span>价格亲民</span>
          </li>
          <li><span>价格亲民</span></li>
          <li><span>价格亲民</span></li>
        </ul>
      </div>
      <div class="bottom">
        <!-- 网页底部几乎不需要优化，所以直接a即可 -->
        <p>
          <a href="#">关于我们</a> |
          <a href="#">关于我们</a> |
          <a href="#">关于我们</a> |
          <a href="#">关于我们</a> |
          <a href="#">关于我们</a> |
          <a href="#">关于我们</a> |
        </p>
        <p>CopyRight @ 小兔鲜儿</p>
      </div>
    </div>
  </div>
</body>

</html>